﻿@model FlyingCircusWebIS.ViewModels.ReservaVM.ReservaDashboardVM

@{
    ViewBag.Title = "Dashboard - Indicadores das Reservas";
}
<div id="outraspg">
    <h1>Indicadores - @DateTime.Now.ToString("dd/MM/yy")</h1>

    <div id="tabs">
        <ul>
            <li><a href="#dbFaturamento" id="dbFaturamentoLink">Faturamento em R$</a></li>
            <li><a href="#dbRankingCidades" id="dbRankingCidadesLink">Ranking de cidades</a></li>
            <li><a href="#dbFormaPagamento" id="dbFormaPagamentoLink">Reservas por forma de pagamento</a></li>
        </ul>
        <div id="dbFormaPagamento">
            <h3>Reservas por Formas de Pagamento</h3>
            <img src='@Url.Action("GraficoReservasPorFormasPagamento")' alt="Gráfico: Reservas por Formas de Pagamento" />
        </div>
        <div id="dbRankingCidades">
            <h3>Ranking das cidades destino com maior interesse</h3>
            @Html.Action("ListarRankingCidadesReservas")
        </div>
        <div id="dbFaturamento">
            <h3>Faturamento @DateTime.Now.Year em R$</h3>
            <img src='@Url.Action("GraficoReservasFaturamento")' alt="Gráfico: Faturamento" />
        </div>

    </div>
</div>

@section css
{
    <style type="text/css">
        #dbFaturamento {
            margin-top: 20px;
            text-align: center;
            margin-left: -20px;
        }

            #dbFaturamento img {
                border: none;
            }

        #dbFormaPagamento {
            margin-top: 20px;
            text-align: center;
        }

            #dbFormaPagamento img {
                border: none;
            }

        #dbRankingCidades {
            margin-top: 20px;
            margin-left: auto;
            margin-right: auto;
        }

        ​ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
            background: rgb(26, 188, 156);
        }

        .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
            background: #34495e;
            font-weight: bold;
        }
    </style>
}

@section scripts
{
    <script type="text/javascript">
        $(document).ready(function () {

            // Plugin para uso de tabs
            $("#tabs").tabs();
        });


        $(document).ready(function () {
            $(".gerenciar").toggleClass("current");
        });

    </script>
}